<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.css">

    <!--引入自定义CSS-->
    <link rel="stylesheet" href="style.css">

    <title>Title</title>
</head>
<body>

<header>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <!--<span class="navbar-brand ">LOGO</span>-->
        <a href="#" class="navbar-brand">
            <img src="img/logo.svg" alt="" width="30" height="30" class="align-top mr-1">Bootstrap
        </a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div id="navbar" class="collapse navbar-collapse">

            <div class="navbar-nav">
                <a href="#" class="nav-item active nav-link">首页</a>
                <a href="#" class="nav-item nav-link">列表页</a>
                <a href="#" class="nav-item nav-link">图文</a>
                <a href="#" class="nav-item nav-link">关于</a>
            </div>

            <form action="" class="form-inline ml-auto">
                <label>
                    <input type="text" class="form-control mr-1" placeholder="keyword">
                </label>
                <button class="btn btn-outline-secondary my-2">搜索</button>
            </form>
        </div>
    </nav>
</header>

<div id="carousel" class="carousel slide w-100" data-ride="carousel">
    <!--轮播指示器-下方-->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
        <div class="carousel-item active"><img src="img/slider1.jpg" class="mx-auto d-block img-fluid" alt=""></div>
        <div class="carousel-item"><img src="img/slider2.jpg" class="mx-auto d-block img-fluid" alt=""></div>
        <div class="carousel-item"><img src="img/slider3.jpg" class="mx-auto d-block img-fluid" alt=""></div>
    </div>

    <!--轮播指示器-左右-->
    <a href="#carousel" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a href="#carousel" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

<section>
    <article class="container">
        <h2>「为什么选择Bootstrap4.x」</h2>
        <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单！</p>
        <div class="row index-content">
            <div class="col-lg-6 my-2">
                <div class="media">
                    <img src="img/tab-1.png" alt="">
                    <div class="media-body ml-2">
                        <h5>课程内容</h5>
                        <p>
                            <del>其他：高校不知名的讲师编写，没有任何实战价值的教材！</del>
                        </p>
                        <p>我们：知名企业家、管理学大师联合编写的具有实现性教材！</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 my-2">
                <div class="media">
                    <img src="img/tab-2.png" alt="">
                    <div class="media-body ml-2">
                        <h5>课程内容</h5>
                        <p>
                            <del>其他：高校不知名的讲师编写，没有任何实战价值的教材！</del>
                        </p>
                        <p>我们：知名企业家、管理学大师联合编写的具有实现性教材！</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 my-2">
                <div class="media">
                    <img src="img/tab-3.png" alt="">
                    <div class="media-body ml-2">
                        <h5>课程内容</h5>
                        <p>
                            <del>其他：高校不知名的讲师编写，没有任何实战价值的教材！</del>
                        </p>
                        <p>我们：知名企业家、管理学大师联合编写的具有实现性教材！</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 my-2">
                <div class="media">
                    <img src="img/tab-4.png" alt="">
                    <div class="media-body ml-2">
                        <h5>课程内容</h5>
                        <p>
                            <del>其他：高校不知名的讲师编写，没有任何实战价值的教材！</del>
                        </p>
                        <p>我们：知名企业家、管理学大师联合编写的具有实现性教材！</p>
                    </div>
                </div>
            </div>
        </div>
    </article>
    <article class="tab5">
        <div class="container">
            <div class="row justify-content-center align-items-center text-center">
                <div class="col-md-6 p-5">
                    <img src=img/tab5.png alt="" style="width: 60%;">
                </div>
                <div class="col-md-5 p-4 ">
                    <h3>强大的学习体系</h3>
                    <p>经过管理学大师层层把关、让您的企业突飞猛进。</p>
                </div>
            </div>
        </div>
    </article>
    <article class="tab6 ">
        <div class="container">
            <div class="row justify-content-center align-items-center text-center" style="height: 65vh">
                <div class="col-md-6 p-5 order-md-2">
                    <img src=img/tab6.png alt="" style="width: 70%;">
                </div>
                <div class="col-md-5 p-4 order-md-1">
                    <h3>完美的管理方式</h3>
                    <p>最新的管理培训方案，让您的企业赶超同行。</p>
                </div>
            </div>
        </div>
    </article>
</section>


<footer class="bg-dark text-light text-center p-5">
    <p class="m-1">企业培训 | 合作事宜 | 版权投诉</p>
    <p>苏ICP 备12345678. © 2009-2020 Bootstrap4.x. Powered by Bootstrap.</p>
</footer>

<!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="bootstrap-4.6.0-dist/js/bootstrap.js"></script>
</body>
</html>